/* components */
import { 
  BaseSelectUserNoDataView,
  BaseSelectUserInfiniteScrollUser,
  BaseSelectUserUserItems
} from '@src/component/common/BaseSelectUser/components'

/* enum */
import { 
  BaseSelectUserComponentNameEnum
} from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { 
  useBaseSelectUserStoreLoadingMap, 
  useBaseSelectUserStoreUserListMap 
} from '@src/component/common/BaseSelectUser/store'

import { useBaseSelectUserOptions } from '@src/component/common/BaseSelectUser/hooks'

/* scss */
import '@src/component/common/BaseSelectUser/components/ProjectTeam/index.scss'

/* vue */
import { defineComponent, computed, PropType } from "vue";

/* util */
import { isFalse } from '@src/util/type'

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserProjectTeamRight,
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
  },
  setup() {
    const { renderDynamicContent } = useBaseSelectUserOptions()

    const { projectTeamUserList, isProjectTeamUserListEmpty } = useBaseSelectUserStoreUserListMap()

    const { projectTeamUserLoading, tabLoading } = useBaseSelectUserStoreLoadingMap()

    /** 
     * @description 是否显示项目人员员列表无数据页面
     * 1. 列表为空
     * 2. 且 不在加载状态
    */
    const isShowProjectTeamUserListNotDataView = computed(() => {      
      return isProjectTeamUserListEmpty.value && isFalse(projectTeamUserLoading.value)
    })
    
    /** 
     * @description 是否不显示列表无数据页面
    */
    const isNotShowProjectTeamUserListNotDataView = computed(() => {
      return isFalse(isShowProjectTeamUserListNotDataView.value)
    })

    return {
      projectTeamUserList,
      projectTeamUserLoading,
      tabLoading,
      isShowProjectTeamUserListNotDataView,
      isNotShowProjectTeamUserListNotDataView,
      renderDynamicContent
    }
  },
  methods: {
    /** 
    * @description 获取属性列表
    */
    getAttributes() {
      return {
        directives: [
          {
            name: 'loading',
            value: this.projectTeamUserLoading && isFalse(this.tabLoading)
          }
        ]
      }
    }
  },
  render(h: CreateElement) {
    const attrs = this.getAttributes()

    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserProjectTeamRight} {...attrs}>
        { this.renderDynamicContent ? this.renderDynamicContent(h, this) : ''}

        <div 
          class="base-select-user-height-100-percent"
          v-show={this.isNotShowProjectTeamUserListNotDataView}
        >

          {/* start 无限滚动人员 */}
          <BaseSelectUserInfiniteScrollUser>
            {/* start 人员列表 */}
            <BaseSelectUserUserItems 
              value={this.projectTeamUserList} 
              is-multi={this.isMulti} 
            />
            {/* end 人员列表 */}
            
          </BaseSelectUserInfiniteScrollUser>
          {/* end 无限滚动人员 */}
        </div>

        {/* start 无数据显示 */}
        <BaseSelectUserNoDataView v-show={this.isShowProjectTeamUserListNotDataView} />
        {/* end 无数据显示 */}
      </div>
    )
  }
})